<!-- 网点服务 -->
<template>
	<view>
		<view class="branch" v-for="(item, index) in arr" :key="index">
			<view class="branch_top">
				<view class="branch_wd" @click="chax">网点查询</view>
				<!-- 网点 -->
				<view class="branch_fj">
					<text class="wd">附近网点</text>
					<text class="juli">{{ itemData ? '距您' + itemData.distance : '距您' + item.distance }}</text>
				</view>
				<!-- 名字 -->
				<view class="branch_name">
					<text class="mname">{{ itemData ? itemData.title : item.title }}</text>
					<text class="yy">营业中</text>
				</view>
				<!-- 电话 -->
				<view class="branch_phone">
					<svg t="1692194392907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4014" width="16" height="16">
						<path
							d="M375.2 480.8c36 72.8 94.4 132.8 165.6 169.6l55.2-56.8c6.4-7.2 16.8-9.6 25.6-6.4 28 9.6 58.4 14.4 89.6 14.4 13.6 0 24.8 12 24.8 25.6v89.6c0 14.4-11.2 25.6-24.8 25.6-236 0-427.2-196-427.2-438.4 0-14.4 11.2-25.6 24.8-25.6h88c13.6 0 24.8 11.2 24.8 25.6 0 32 4.8 63.2 14.4 92.8 2.4 8.8 0.8 19.2-6.4 26.4l-54.4 57.6zM512 128c-212 0-384 172-384 384s172 384 384 384 384-172 384-384-172-384-384-384m0-64c247.2 0 448 200.8 448 448s-200.8 448-448 448S64 759.2 64 512 264.8 64 512 64z"
							p-id="4015"
							fill="#0e932e"
						></path>
					</svg>
					<view class="phoene">{{ itemData ? itemData.phone : item.phone }}</view>
				</view>
				<!-- 地方 -->
				<view class="branch_difang">
					<svg t="1692194525846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5213" width="16" height="16">
						<path
							d="M512.095172 63.72331c-180.042989 0-326.01848 145.976515-326.01848 326.019504 0 264.890399 326.01848 570.533876 326.01848 570.533876s326.019504-305.642453 326.019504-570.533876C838.114676 209.699825 692.139184 63.72331 512.095172 63.72331zM512.095172 552.752054c-90.061405 0-163.00924-72.987746-163.00924-163.00924 0-90.021494 72.947835-163.010264 163.00924-163.010264 90.022518 0 163.010264 72.988769 163.010264 163.010264C675.105436 479.764308 602.11769 552.752054 512.095172 552.752054z"
							fill="#0e932e"
							p-id="5214"
						></path>
					</svg>
					<text>{{ itemData ? itemData.place : item.place }}</text>
				</view>
			</view>
			<view class="branch_bottom">
				<text class="bottom_peop">等待人数</text>
				<view class="bottom_gepeop">
					<view class="bottom_ge">
						
						<view class="">{{itemData ? itemData.gpeople :item.gpeople}}</view>
						<view class="">个人业务</view>
					</view>

					<view class="bottom_ren">
						<view class="">{{itemData ? itemData.dpeople :item.dpeople}}</view>
						<view class="">对公业务</view>
					</view>
				</view>
				<button class="buttona">取号</button>
			</view>
		</view>
		<view class="quhao">
			<view class="">取号记录</view>
			<view class="">|</view>
			<view class="">预约记录</view>
		</view>
		<!-- 预约办理区 -->
		<view class="yuy">
			预约办理
		</view>
		<view class="yuy_q">
			<view class="" v-for="(item, index) in data" :key="index">
				<view class="yuy_y">
					<image class="tupian" :src="item.img" mode=""></image>
					<view class="">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
// 引入接口
import { conten } from '../../API/server.js';

export default {
	data() {
		return {
			arr: [],
			data: [
				{
					img: '../../static/img/xinyong.png',
					name: '开卡预填单'
				},
				{
					img: '../../static/img/cunkan.png',
					name: '大额提现'
				},
				{
					img: '../../static/img/money.png',
					name: '外币取现'
				},
				{
					img: '../../static/img/dkw.png',
					name: '贷款预约'
				},
				{
					img: '../../static/img/money (1).png',
					name: '纪念币预约'
				},
				{
					img: '../../static/img/zhuanzhang.png',
					name: '同号换卡'
				}
			]
		};
	},
	methods: {
		onLoad(options) {
		  if (options.data) {
		    this.itemData = JSON.parse(options.data);
		  } else {
		    this.itemData = null;
		  }
		},
		onShow() {
			this.branch();
		},
		branch() {
			conten()
				.then((res) => {
					// console.log(res);
					this.arr = res.data.data;
				})
				.catch((error) => {
					console.error(error);
				});
		},
		chax(){
			uni.navigateTo({
				url:"/pages/branch/branche"
			})
		}
	}
};
</script>

<style scoped>
.branch {
	background-color: #f3f3f3;
	width: 720rpx;
	height: 660rpx;
	margin-left: 15rpx;
	margin-top: 30rpx;
	border-radius: 20rpx;
}
.branch_top {
	width: 690rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
	border-bottom: 1rpx solid #000;
	height: 270rpx;
}
.branch_wd {
	margin-left: 560rpx;
	background-color: #d8d8d8;
	border-radius: 20rpx, 0rpx, 20rpx, 0rpx;
	padding: 5rpx;
	width: 130rpx;
	height: 50rpx;
	font-size: 28rpx;
}
.branch_fj {
	/* background-color: #f1f10f; */
	width: 350rpx;
}
.wd {
	color: black;
	font-size: 30rpx;
}
.juli {
	color: coral;
	margin-left: 20rpx;
}
.branch_name {
	width: 600rpx;
	/* background-color: antiquewhite; */
	margin-top: 15rpx;
}
.mname {
	font-size: 35rpx;
	font-weight: 900;
}
.yy {
	margin-left: 20rpx;
	border: 1rpx solid #0e932e;
	color: #0e932e;
}
.branch_phone {
	margin-top: 10rpx;
	display: flex;
	color: #0e932e;
	align-items: center;
}
.branch_difang {
	margin-top: 10rpx;
	display: flex;
	color: #0e932e;
	align-items: center;
}
.branch_bottom {
	margin-top: 20rpx;
}
.bottom_peop {
	color: #000;
	margin-left: 29rpx;
	font-size: 30rpx;
}
.bottom_gepeop {
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.bottom_ge {
	width: 120rpx;
	height: 100rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.bottom_ren {
	width: 120rpx;
	height: 100rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.buttona {
	background-color: #ffaa00;
	width: 650rpx;
	color: #fff;
}
.quhao {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 80rpx;
	color: #000;
	font-size: 30rpx;
}
.tupian {
	width: 60rpx;
	height: 60rpx;
}
.yuy_y {
	display: flex;
	height: 140rpx;
	width: 160rpx;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}
.yuy_q {
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.yuy_q::after{
     content: "";
     width: 330rpx;
     height: 0;
     visibility: hidden;
}
.yuy{
	margin-left: 20rpx;
	margin-top: 30rpx;
	font-size: 40rpx;
	font-weight: 900;
}
</style>
